<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript可展开隐藏的侧边栏下拉菜单DEMO演示</title>
<style type="text/css">
        body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, img {
        margin: 0;
        padding: 0;
    }

    body, html {
        font-size: 16px;
        font-family: "微软雅黑";
        height: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    /*定位居中*/
    .middle {
        position: absolute;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }

    a {
        color: #3e3e3e;
        text-decoration: none;
    }

    img, input, button, textarea {
        border: none;
        padding: 0;
        margin: 0;
        outline-style: none;
    }

    ul {
        list-style: none;
    }

    input {
        padding-top: 0;
        padding-bottom: 0;
        font-family: "SimSun", "宋体";
    }

    /*去掉行内替换元素空白缝隙*/
    img {
        border: 0;
        vertical-align: middle;
    }

    h1, h2, h3, h4, h5, h6 {
        text-decoration: none;
        font-weight: normal;
        font-size: 100%;
    }

    s, i, em, u {
        font-style: normal;
        text-decoration: none;
    }

    .fl {
        float: left;
    }

    .fr {
        float: right;
    }

    /*清除浮动*/
    .clearfix:before,
    .clearfix:after {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;
        /*IE/7/6*/
    }
        #menu {
      overflow: hidden;
      height: 100%;
      float: left;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    #menu #ensconce {
      /*隐藏菜单样式*/
      width: 0.35rem;
      height: 100%;
      background-color: #20343c;
      float: left;
      text-align: center;
      position: relative;
      display: none;
    }
    #menu #ensconce h2 {
      cursor: pointer;
      color: #fff;
      font-size: 0.24rem;
      line-height: 0.5rem;
      width: 100%;
      position: absolute;
      top: 35%;
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      -o-transform: translate(-50%, -50%);
      transform: translate(0%, -50%);
    }
    #menu #ensconce h2 img {
      width: 52%;
    }
    #menu #open {
      /*显示菜单样式*/
      width: 2.6rem;
      height: 100%;
      background-color: #363a45;
      padding-bottom: 0.1rem;
      box-sizing: border-box;
      -webkit-transition: all 0.8s ease;
      -moz-transition: all 0.8s ease;
      -o-transition: all 0.8s ease;
      -ms-transition: all 0.8s ease;
    }
    #menu #open .navH {
      height: 0.6rem;
      background-color: #44495a;
      line-height: 0.6rem;
      text-align: center;
      font-size: 0.2rem;
      color: #fff;
      position: relative;
      box-sizing: border-box;
    }
    #menu #open .navH span {
      position: absolute;
      top: 49%;
      right: 0;
      padding: 0 0.15rem;
      cursor: pointer;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
      display: inline-block;
    }
    #menu #open .navH span .obscure {
      width: 0.24rem;
    }
    #menu #open .navBox {
      height: 100%;
      overflow-y: auto;
      padding-left: 0.05rem;
      padding-right: 0.07rem;
      margin-top: 0.1rem;
    }
    #menu #open .navBox ul li {
      background-color: #393c4a;
      cursor: pointer;
      margin-bottom: 4px;
    }
    #menu #open .navBox ul li .obtain {
        background-color: #3889D4; 
    }
    #menu #open .navBox ul li .obtain:hover {
        background-color: #3D8332; 
    }
    #menu #open .navBox ul li h2 {
      position: relative;
      width: 100%;
      height: 100%;
      text-align: center;
      color: #fff;
      font-size: 0.15rem;
      padding: 0.15rem 0;
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
    }
    #menu #open .navBox ul li h2 i {
      position: absolute;
      top: 50%;
      right: 0.15rem;
      border-top: 0.07rem transparent dashed;
      border-left: 0.07rem solid #fff;
      border-right: 0.07rem transparent dashed;
      border-bottom: 0.07rem transparent dashed;
      display: inline-block;
      -webkit-transition: -webkit-transform 0.6s ease;
      -moz-transition: -moz-transform 0.6s ease;
      -o-transition: -o-transform 0.6s ease;
      -ms-transition: -ms-transform 0.6s ease;
      transform-origin: 4px 3px;
      -webkit-transform: translate(0, -50%);
      -moz-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      -o-transform: translate(0, -50%);
      transform: translate(0, -50%);
    }
    #menu #open .navBox ul li h2 .arrowRot {
      -webkit-transform: rotate(90deg);
      -moz-transform: rotate(90deg);
      -o-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
      transform: rotate(90deg);
    }
    #menu #open .navBox ul li .secondary {
      overflow: hidden;
      height: 0;
      -webkit-transition: all 0.6s ease;
      -moz-transition: all 0.6s ease;
      -o-transition: all 0.6s ease;
      -ms-transition: all 0.6s ease;
    }
    #menu #open .navBox ul li .secondary h3 {
      padding: 0.1rem 0;
        text-align: center;
        font-size: 0.13rem;
        background-color: #282c3a;
        color: #ffffff;
        border-bottom: 0.8px solid #42495d;
      -webkit-transition: all 0.4s ease;
      -moz-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
    }
    #menu #open .navBox ul li .secondary h3:hover {
      background-color: #1acbfc;
    }
    #menu #open .navBox ul li .secondary .seconFocus {
      background-color: #1acbfc;
      -webkit-box-shadow: 3px 3px 3px #aa8c51;
      -moz-box-shadow: 3px 3px 3px #aa8c51;
      box-shadow: 3px 3px 3px #aa8c51;
    }

</style>
<script>
        /* rem 适应*/
    /*让文字和标签的大小随着屏幕的尺寸做变话 等比缩放*/
    var html = document.getElementsByTagName('html')[0];
    /*取到屏幕的宽度*/
    var width = window.innerWidth;
    /* 640 100  320 50 */
    if (width > 1080) {
        width = 1080;
    }
    else if (width < 320 ) {
        width = 320 ;
    }
    var fontSize = 100/1080*width;
    /*设置fontsize*/

    html.style.fontSize = fontSize +'px';
    window.onresize = function(){
        var html = document.getElementsByTagName('html')[0];
        /*取到屏幕的宽度*/
        var width = window.innerWidth;
        if (width > 1080) {
            width = 1080;
        }
        else if (width < 320 ) {
            width = 320 ;
        }
        /* 640 100  320 50 */
        var fontSize = 100/1080 * width;
        /*设置fontsize*/
        html.style.fontSize = fontSize +'px';
    }
</script>


</head>
<body>
<div style="text-align:center;clear:both">

</div>
<div id="menu">
    <!--隐藏菜单-->
    <div id="ensconce">
        <h2>
            <img src="images/show.png" alt="">
            国内各地景点
        </h2>
    </div>

    <!--显示菜单-->
    <div id="open">
        <div class="navH">
            国内各地景点
            <span><img class="obscure" src="images/obscure.png" alt=""></span>
        </div>
        <div class="navBox">
            <ul>
                <li>
                    <h2 class="obtain">北京景点<i></i></h2>
                    <div class="secondary">
                        <h3>故宫</h3>
                        <h3>十三陵</h3>
                        <h3>圆明园</h3>
                        <h3>长城</h3>
                        <h3>雍和宫</h3>
                        <h3>天坛公园</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">南京景点<i></i></h2>
                    <div class="secondary">
                        <h3>栖霞寺</h3>
                        <h3>夫子庙</h3>
                        <h3>海底世界</h3>
                        <h3>中山陵</h3>
                        <h3>乌衣巷</h3>
                        <h3>音乐台</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">上海景点<i></i></h2>
                    <div class="secondary">
                        <h3>东方明珠</h3>
                        <h3>外滩</h3>
                        <h3>豫园</h3>
                        <h3>文庙</h3>
                        <h3>世博园</h3>
                        <h3>田子坊</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">深圳景点<i></i></h2>
                    <div class="secondary">
                        <h3>华侨城</h3>
                        <h3>观澜湖</h3>
                        <h3>世界之窗</h3>
                        <h3>东门老街</h3>
                        <h3>七娘山</h3>
                        <h3>光明农场</h3>
                    </div>
                </li>
                <li>
                    <h2 class="obtain">广州景点<i></i></h2>
                    <div class="secondary">
                        <h3>白云山</h3>
                        <h3>长隆</h3>
                        <h3>黄花岗公园</h3>
                        <h3>中山纪念堂</h3>
                        <h3>华南植物园</h3>
                        <h3>南沙湿地公园</h3>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>

<script src="js/menu.js"></script> <!--控制js-->

</body>
</html>